<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <div class="finish">
                    <div class="finishNum">总欠款:
                        <div class="text">{{ total_stock.collect_money }}</div>
                    </div>
                    <div class="finishNum">总收回金额:
                        <div class="text">{{ total_stock.pay_money }}</div>
                    </div>
                    <div class="finishNum">总应收金额:
                        <div class="text">{{ total_stock.only_money }}</div>
                    </div>
                </div>
            </div>
            <div class="right-panel">
                <div class="right-panel-search">
                <el-select v-model="search.customer_id" filterable clearable placeholder="请选择客户">
                    <el-option v-for="item in clientList" :key="item.id" :label="item.customer_name" :value="item.id"/>
                </el-select>
                <!-- <el-date-picker v-model="search.create_time" :value-format="'YYYY-MM-DD'" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /> -->
                <el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="refresh"></el-button>
                </div>
            </div>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" row-key="id" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border @setExtend="setExtend">
                <el-table-column type="selection" width="50" reserve-selection align="center"></el-table-column>
                <el-table-column type="index" label="序号" fixed align="center" width="50"></el-table-column>
                <el-table-column label="客户名称" prop="customer.customer_name" align="center"></el-table-column>
                <el-table-column label="联系人" prop="customer.contacts" align="center"></el-table-column>
                <el-table-column label="联系电话" prop="customer.mobile" align="center"></el-table-column>
                <el-table-column label="欠款总额" prop="all_money" align="center"></el-table-column>
                <el-table-column label="收回欠款" prop="all_pay_money" align="center"></el-table-column>
                <el-table-column label="应收欠款" prop="all_only_money" align="center"></el-table-column>
                <el-table-column label="操作" align="center" width="170">
                    <template #default="scope">
                        <el-button-group>
                        <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)" v-auth="'receivable.detail'">欠款详情</el-button>
                        <el-button text type="warning" size="small" @click="table_shou(scope.row, scope.$index)" v-auth="'receivable.receivable'">收款</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <details-dialog v-if="dialog.detail" ref="detailDialog" @success="handleSuccess" @closed="dialog.detail = false" :query="{customer_id:this.customer_id,scene:1}"></details-dialog>
    <!-- 欠款详情 -->
    <collection v-if="dialog.collection" ref="collectionDialog" @success="handleSuccess" @closed="dialog.collection = false"></collection>
</template>

<script>
import Collection from '../collection/save.vue'
import detailsDialog from '././details.vue'

export default {
    name: '应收账款（列表）',
    components: {
        detailsDialog, Collection,
    },
    data() {
        return {
        dialog: {
            collection: false,
            detail: false,
        },
        apiObj: this.$API.finance.receivable.list,
        selection: [],
        search: {
            customer_id: null,
            business_date: null,
        },
        customer_id: "",
        clientList: [],
        total_stock: {},
        }
    },
    mounted() {
        this.getClient();
    },
    methods: {
        setExtend(data) {
            this.total_stock = data
        },
        //欠款详情
        table_edit(row) {
            this.customer_id = row.customer_id
            this.dialog.detail = true
            this.$nextTick(() => {
                this.$refs.detailDialog.open('show')
            })
        },
        //收款
        table_shou(row) {
            this.dialog.collection = true
            this.$nextTick(() => {
                this.$refs.collectionDialog.open('collection').collectionData(row)
            })
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selection = selection;
        },
        //搜索
        upsearch() {
            this.$refs.table.upData(this.search)
        },
        refresh() {
            for (const key in this.search) {
                this.search[key] = null;
            }
            this.$refs.table.upData(this.search)
        },
        //本地更新数据
        handleSuccess(data, mode) {
            if (mode == 'add') {
                this.$refs.table.refresh()
            } else if (mode == 'edit') {
                this.$refs.table.refresh()
            }
        },
        // 客户
        async getClient() {
            var res = await this.$API.client.client.all.get();
            this.clientList = res.data;
        },
    }
}
</script>

<style></style>
